<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="案件号" prop="case_number">
        <el-input
          v-model="queryParams.case_number"
          placeholder="请输入案件号"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="物损类型" prop="damage_type">
        <el-select
          v-model="queryParams.damage_type"
          placeholder="请选择物损类型"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in materialDamageList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物损方及电话" prop="damage_customer">
        <el-input
          v-model="queryParams.damage_customer"
          placeholder="请输入物损方"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="案件状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择案件状态"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in assessStatusOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:assessManagement:add']"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          v-hasPermi="['system:assessManagement:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          v-hasPermi="['system:assessManagement:remove']"
          >删除</el-button
        >
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['system:assessManagement:export']"
          >导出</el-button
        >
      </el-col> -->

      <!-- <el-col :span="1.5">
        <el-upload
          :on-success="handleImportSuccess"
          accept=".xls,.xlsx"
          :action="importUrl"
          :headers="importHeaders"
          :show-file-list="false"
        >
          <el-button
            v-hasPermi="['system:assessManagement:import']"
            type="primary"
            plain
            icon="el-icon-upload"
            size="mini"
            >案件导入</el-button
          >
        </el-upload> -->
      <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini"
          v-hasPermi="['system:assessManagement:add']">案件导入</el-button> -->
      <!-- </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="assessList" height="600">
      <el-table-column label="主键id" align="center" prop="id" v-if="false" />
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="案件号" align="center" prop="case_number" />
      <el-table-column label="查勘员" align="center" prop="surveyer" />
      <el-table-column
        label="物损方及电话"
        :show-overflow-tooltip="true"
        align="center"
        prop="damage_customer"
      />
      <el-table-column
        label="所属区域"
        align="center"
        prop="region"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="车牌号"
        align="center"
        width="90px"
        prop="car_number"
      />
      <el-table-column label="保险公司" align="center" prop="insurer" />
      <el-table-column label="开户行" align="center" prop="opening_bank" />
      <el-table-column
        label="银行卡号"
        align="center"
        prop="bank_account_number"
      />
      <el-table-column
        label="物损方确定报价"
        align="center"
        prop="damage_customer_price"
      />
      <el-table-column
        label="施工费用"
        align="center"
        prop="construction_amount"
      >
        <template slot-scope="scope">
          {{ scope.row.construction_amount || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column label="税率" align="center" prop="tax_rate">
        <template slot-scope="scope">
          {{ scope.row.tax_rate !== null ? scope.row.tax_rate + "%" : "暂无" }}
        </template>
      </el-table-column>
      <el-table-column label="税金" align="center" prop="taxes">
        <template slot-scope="scope">
          {{ scope.row.taxes || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column label="施工总价" align="center" prop="total_amount">
        <template slot-scope="scope">
          {{ scope.row.total_amount || "暂无" }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ getStatusLabel(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column
        label="操作"
        fixed="right"
        width="130px"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.status === 1">
            <el-popconfirm
              confirm-button-text="提交"
              cancel-button-text="取消"
              :ref="`popover-${scope.$index}`"
              :title="`确定提交【${scope.row.case_number}】案件吗？`"
              @confirm="confirmAuditing(scope.row)"
              @cancel="cancelAuditing(scope.row)"
              >s
              <el-link
                style="margin: 6px; font-size: 12px"
                type="primary"
                slot="reference"
                icon="el-icon-share"
                :underline="false"
                >提交</el-link
              >
            </el-popconfirm>
          </template>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetails(scope.row)"
            v-hasPermi="['system:assessManagement:edit']"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:assessManagement:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:assessManagement:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <edit
      :visible="editVisible"
      :formData="editData"
      :isEdit="isEdit"
      @onClose="editClose"
      @onEnter="editEnter"
      ref="editRef"
    />
    <detailsEdit
      :detailsVisible="detailsVisible"
      :formData="detailsData"
      :itemQuantity="itemQuantity"
      @onClose="detailsClose"
      @onEnter="detailsEnter"
      ref="detailsRef"
    />
  </div>
</template>
<script>
import Edit from "./Edit";
import detailsEdit from "./detailsEdit";
import {
  assessManageList,
  addAssessManagement,
  updateAssessManagement,
  deleteAssessManagement,
  getDamageProperty,
  updateStatus,
} from "@/api/system/assessManage";
export default {
  components: { Edit, detailsEdit },
  props: [],
  data() {
    return {
      editVisible: false,
      detailsVisible: false,
      editData: {},
      detailsData: {},
      isEdit: false,
      showSearch: true,
      loading: true,
      assessList: [],
      itemQuantity: [],
      total: 0,
      queryParams: {
        case_number: undefined,
        damage_type: undefined,
        damage_customer: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      materialDamageList: [
        { label: "工程机械类", value: 1 },
        { label: "房屋建筑类", value: 2 },
        { label: "道路设施类", value: 3 },
        { label: "电力/通讯设施类", value: 4 },
        { label: "园林绿化类", value: 5 },
        { label: "庄稼食品类", value: 6 },
        { label: "电器设备类", value: 7 },
        { label: "财产险物损类", value: 8 },
      ],
      assessStatusOptions: [
        {
          label: "案件废弃",
          value: 0,
        },
        {
          label: "已结案",
          value: 1,
        },
        {
          label: "查勘阶段",
          value: 2,
        },
        {
          label: "定损阶段",
          value: 3,
        },
        {
          label: "核损阶段",
          value: 4,
        },
        {
          label: "维修阶段",
          value: 5,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    getStatusLabel(value) {
      const item = this.assessStatusOptions.find(
        (option) => option.value === value
      );
      return item ? item.label : "";
    },
    confirmAuditing(e) {
      updateStatus({
        case_number: e.case_number,
      }).then((response) => {
        this.$modal.msgSuccess("提交成功");
        this.getList();
      });
    },
    cancelAuditing(e) {},
    handleAdd() {
      this.$refs.editRef.form = {};
      this.$refs.editRef.editType = false;
      this.isEdit = false;
      this.editVisible = true;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      let params = { ...this.queryParams };
      delete params.addressCode;
      assessManageList(params).then((res) => {
        this.assessList = res.data.list;
        this.assessList = this.assessList.map((e) => ({ ...e, region: "" }));
        this.assessList.forEach((e) => {
          const province = e.province || "";
          const city = e.city || "";
          const area = e.area || "";
          const accident_address = e.accident_address || "";
          e.region = province + city + area + accident_address || "暂无";
        });
        this.total = res.data.total;
        this.loading = false;
      });
    },
    editEnter(e) {
      if (e.id) {
        updateAssessManagement(e).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.editVisible = false;
          this.getList();
        });
      } else {
        addAssessManagement(e).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.editVisible = false;
          this.getList();
        });
      }
    },
    editClose() {
      this.editVisible = false;
    },
    handleDetails(e) {
      this.detailsData = { ...e };
      this.$refs.detailsRef.damageData = [];
      this.$refs.detailsRef.photosToDelete = [];
      this.$refs.detailsRef.newPhotos = [];
      getDamageProperty({ case_number: e.case_number }).then((res) => {
        this.itemQuantity = res.data;
        this.itemQuantity.forEach((item) => {
          if (Number.isInteger(parseFloat(item.total_project_price))) {
            item.total_project_price = item.total_project_price + ".00";
          }
        });
        console.log(this.itemQuantity);
      });
      this.detailsVisible = true;
    },
    detailsClose() {
      this.detailsVisible = false;
    },
    detailsEnter() {
      this.detailsVisible = false;
      this.getList();
    },
    handleUpdate(e) {
      this.isEdit = true;
      this.editData = { ...e };
      this.editVisible = true;
      this.$refs.editRef.editType = true;
    },
    handleDelete(e) {
      this.$modal
        .confirm('是否确认删除案件号为"' + e.case_number + '"的数据项？')
        .then(function () {
          return deleteAssessManagement({
            id: e.id,
            case_number: e.case_number,
          });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style></style>
